<template>
  <el-form label-width="100px">
    <el-form-item label="SPU 名称">
      <span>{{spuName}}</span>
    </el-form-item>

    <el-form-item label="SKU 名称">
      <el-input type="text" placeholder="SKU 名称" v-model="skuInfo.skuName" ></el-input>
    </el-form-item>

    <el-form-item label="价格(元)">
      <el-input type="number" placeholder="SKU 价格" v-model="skuInfo.price"></el-input>
    </el-form-item>

    <el-form-item label="重量(千克)">
      <el-input type="number" placeholder="SKU 重量" v-model="skuInfo.weight"></el-input>
    </el-form-item>

    <el-form-item label="规格描述">
      <el-input type="textarea" placeholder="SKU 规格描述" rows="4" v-model="skuInfo.skuDesc" ></el-input>
    </el-form-item>

    <el-form-item label="平台属性">
      <el-form inline label-width="100px">
        <el-form-item :label="attr.attrName"
                      v-for="attr in skuAttrList" :key="attr.id"
                      style="margin: 5px 0" >
          <el-select placeholder="请输入" v-model="attr.attrValId">
            <el-option
              v-for="val in attr.attrValueList" :key="val.id"
              :value="`${attr.id}-${val.id}`" :label="val.valueName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="销售属性">
      <el-form v-for="attr in skuSaleAttrList" :key="attr.id"
        inline label-width="100px">
        <el-form-item :label="attr.saleAttrName" style="margin: 5px 0" >
          <el-select  placeholder="请输入" v-model="attr.valId">
            <el-option
              v-for="val in attr.spuSaleAttrValueList" :key="val.id"
              :value="val.id" :label="val.saleAttrValueName"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="图片列表">
      <el-table border :data="skuImageList" @selection-change="change">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{row}">
            <img :src="row.imgUrl" alt="" style="width:100px;height:100px;">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row, $index}">
            <el-tag type="info" v-if="row.isDefault">默认</el-tag>
            <el-button type="primary" size="small" v-else @click="setDefault(row)">设为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
	export default {
	  name: 'addSku',
	  data () {
      return {
        spuName:"",
        skuInfo:{
          "category3Id": "",//三级分类 (来自于list组件)
          "spuId": "", // spu的id (来自于一个spu)
          "tmId": "", // 品牌id (来自于一个spu)


          "isSale": 0,

          //界面上有表单元素可以对应的
          "skuName": "", //sku名称
          "price": "", // 价格
          "skuDesc": "", //描述信息
          "weight": "", //重量


          "skuAttrValueList": [], // 平台属性列表 {"attrId": 0,"valueId": 0}
          "skuSaleAttrValueList": [], // 销售属性列表 {saleAttrValueId:000}
          "skuImageList": [], //  图片列表 {"imgName", "imgUrl", "isDefault", "spuImgId"}
          "skuDefaultImg": "" //默认图片
        },
        skuImageList:[], //图片列表 {id,imgName,imgUrl,spuId}
        skuAttrList:[], //平台属性
        skuSaleAttrList:[], //销售属性
      }
	  },

	  methods: {
	    //初始化数据
      async initData({category1Id,category2Id,category3Id,spuId,tmId,spuName}){
        this.spuName = spuName;
        this.category3Id =category3Id;
        this.spuId =spuId;
        this.tmId =tmId;


        //发送请求获取  平台属性集合  spu销售属性集合  spu图片列表
        const p1 = this.$API.attrs.getAttrs({category1Id,category2Id,category3Id});
        const p2 = this.$API.sku.getSpuSaleAttrList(spuId);
        const p3 = this.$API.sku.getSpuImageList(spuId);

        const arr = await Promise.all([p1,p2,p3])
        this.skuAttrList=arr[0].data;
        this.skuSaleAttrList=arr[1].data;
        this.skuImageList=arr[2].data;
      },

      //清空表单数据
      resetData(){
        this.spuName="";
        this.skuInfo={
          "category3Id": "",//三级分类 (来自于list组件)
            "spuId": "", // spu的id (来自于一个spu)
            "tmId": "", // 品牌id (来自于一个spu)
            "isSale": 0,
            //界面上有表单元素可以对应的
            "skuName": "", //sku名称
            "price": "", // 价格
            "skuDesc": "", //描述信息
            "weight": "", //重量
            "skuAttrValueList": [], // 平台属性列表 {"attrId": 0,"valueId": 0}
            "skuSaleAttrValueList": [], // 销售属性列表 {saleAttrValueId:000}
            "skuImageList": [], //  图片列表 {"imgName", "imgUrl", "isDefault", "spuImgId"}
            "skuDefaultImg": "" //默认图片
        };
        this.skuImageList=[]; //图片列表 {id,imgName,imgUrl,spuId}
        this.skuAttrList=[]; //平台属性
        this.skuSaleAttrList=[]; //销售属性
      },

      //取消
      cancel(){
        //清空表单数据
        this.resetData();
        //显示spu列表界面
        this.$parent.$parent.showListFn()
      },

      //设置默认图片
      setDefault(row){
        //row : 當前点击的图片
        //将所有图片的默认状态清空
        this.skuImageList.forEach((image)=>{
          if(image.hasOwnProperty("isDefault")){
            image.isDefault = false;
          }else{
            this.$set(image,"isDefault",false)
          }
        });

        //将当前图片设为默认
        row.isDefault = true;

        //收集默认图片
        this.skuInfo.skuDefaultImg = row.imgUrl;
      },

      //表格复选框发生变化时 触发
      change(selection){
        //收集选择的图片列表
        this.skuInfo.skuImageList = selection;
      },

      //sku的新增
      async save(){
        //1. 整理图片数据
        this.skuInfo.skuImageList = this.skuInfo.skuImageList.map((image)=>{
          if(image.isDefault === undefined){
            if(image.hasOwnProperty("isDefault")){
              image.isDefault = false;
            }else{
              this.$set(image,"isDefault",false)
            }
          }
          return {
            imgName:image.imgName,
            imgUrl:image.imgUrl,
            spuImgId:image.id,
            isDefault:image.isDefault
          }
        });

        //2. 整理平台属性列表
        this.skuAttrList.forEach((skuAttr)=>{
           if(skuAttr.attrValId){
             const [attrId,valueId] = skuAttr.attrValId.split("-");
             let obj = {attrId:+attrId,valueId:+valueId};
             this.skuInfo.skuAttrValueList.push(obj);
           }
        })

        //3. 整理销售属性列表
        this.skuSaleAttrList.forEach((skuSaleAttr)=>{
          if(skuSaleAttr.valId){
            let obj = {saleAttrValueId:+skuSaleAttr.valId};
            this.skuInfo.skuSaleAttrValueList.push(obj);
          }
        })

        //发送请求
        await this.$API.sku.addUpdate(this.skuInfo)

        //成功提示
        this.$message.success("新增sku成功")

        //清空表单数据
        this.resetData();

        //关闭当前界面
        this.$parent.$parent.showListFn()
      }
	  }
	}
</script>
